<template>
  <div>
    <div class="card_top">
      <!-- <div class="L-group-title">客户信息</div> -->
      <div v-for="(value, key, index) in jsondata.headinfo" :key="index">
        <!-- <div v-if="index===0" class="L-group-title" style="font-size:18px;margin:10px auto">{{value}}</div> -->
        <div v-if="index === 0" class="L-group-title" style="font-size:18px;margin:10px auto" v-html="value"></div>

        <div class="L-form-row" v-else>
          <div class="form-lable">{{ key }} : </div>
          <div class="form-content">
            <span v-html="value"></span>
            <template v-if="key == '签到时间'">
              <van-tag v-if="value" round size="medium" color="#edf5ff" text-color="#419eff" type="primary" style="margin-left:5px">已签到</van-tag>
              <van-tag v-else round size="medium" color="#fdf6ed" text-color="#e7a23d" type="primary" style="margin-left:5px">未签到</van-tag>
            </template>
          </div>
        </div>

      </div>

      <!-- <van-cell-group title-style="color:red">
        <div v-for="(value, key, index) in jsondata.headinfo" :key="key" :title="key" :value="value">
          <div>
            <div v-if="index === 0" class="card_top_large">
              <span v-html="value"></span>
            </div>
            <van-cell v-else :value="value">
              <template #title>{{key}}</template>
              <template #default><span>{{value}}</span></template>
              <template v-if="key == '签到时间'" #right-icon>
                <van-tag v-if="value" round size="medium" color="#edf5ff" text-color="#419eff" type="primary" style="margin-left:5px">已签到</van-tag>
                <van-tag v-else round size="medium" color="#fdf6ed" text-color="#e7a23d" type="primary" style="margin-left:5px">未签到</van-tag>
              </template>
            </van-cell>
          </div>
        </div>
      </van-cell-group> -->
      <tag :tags="jsondata.tags" :botags="jsondata.botags" v-if="jsondata.hastag === 1" :bo="idobject" :id="cardid"></tag>
      <van-skeleton title :row="3" :loading="!jsondata.headinfo" />
    </div>
    <div style="background-color: #F9F9FA; height: 7px; width: 100%;"></div>
  </div>
</template>
<script>
import tag from '@/components/Tag.vue'
import Vue from 'vue'
import { Tag, Popover, Skeleton, Search, List, Cell, PullRefresh, Toast, Tabbar, TabbarItem, Popup, DatetimePicker, ActionSheet, Tab, Tabs, Collapse, CollapseItem, Dialog, Uploader, Rate, Icon, Form, Sticky, Image, Loading, Step, Steps, NoticeBar, Swipe, SwipeItem } from 'vant'
Vue.use(Tag).use(Popover).use(Skeleton).use(Search).use(List).use(Cell).use(PullRefresh).use(Toast).use(Tabbar).use(TabbarItem).use(Popup).use(DatetimePicker).use(ActionSheet).use(Tab).use(Tabs).use(Collapse).use(CollapseItem).use(Dialog).use(Uploader).use(Rate).use(Icon).use(Form).use(Sticky).use(Image).use(Loading).use(Step).use(Steps).use(NoticeBar).use(Swipe).use(SwipeItem)
export default {
  data: function () {
    return {
      idobject: this.$route.query.idobject || ''
    }
  },
  filters: {
    cutString (str) {
      if (str.length && str.length > 30) {
        return str.substr(0, 30) + '...'
      } else {
        return str
      }
    }

  },
  components: { tag },
  props: {
    jsondata: {
      type: Object,
      required: false
    },
    cardid: {
      type: String,
      required: false
    }
  },
  mounted: function () {
    //console.log('head jsondata', this.jsondata)
  },
  methods: {
  }
}
</script>
<style>
.card_top {
  padding: 10px;
  box-sizing: border-box;
  padding-bottom: 10px;
}

.card_top .card_top_large {
  font-size: 18px;
  /* padding-bottom: 10px; */
  padding-left: 10px;
  margin: 10px auto;
  overflow: hidden;
  /* border-left:5px solid #409eff */
}

.card_top .card_top_small {
  font-size: 14px;
  border: 1px solid #ebebeb;
  /*display: flex;
    justify-content: space-between;
    padding: 1.32vw 2.13vw;
    overflow: hidden;*/
  /*white-space: nowrap;  */

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card_top_small_item {}
</style>
